<template>
  <div class="carList">
    <div class="carList_top">
      <van-nav-bar @click-left="onClickLeft" fixed>
        <template #left>
          <van-icon name="arrow-left" color="#aaa" />
        </template>
        <template #title>
          <div class="carList_top_title">
            <div class="tabGroup">
              <div
                :class="{ tab: true, active: my_showFlag }"
                @click="getTopic(2, 'myOrder')"
              >
                我的订单
              </div>
              <div
                class="tab"
                :class="{ tab: true, active: all_showFlag }"
                @click="getTopic(1, 'allOrder')"
              >
                全部订单
              </div>
            </div>
          </div>
        </template>
      </van-nav-bar>
    </div>
    <div class="carList_main">
      <div class="myOrder" v-if="top_active == 2">
        <van-tabs
          @click-tab="myOrder_onClick"
          title-active-color="#1989fa"
          color="#1989fa"
        >
          <van-tab
            v-for="(tab, index) in myOrder_tabList"
            :title="tab.title"
            :key="tab.title + index"
            :name="tab.name"
          >
            <div class="main_seach">
              <van-search
                v-model="search_content"
                shape="round"
                background="#fff"
                placeholder="查询城市/乘车人/部门"
                @blur="search_count"
              />
            </div>
            <div v-if="myOrder_active == index">
              <!--上拉、下拉组件 父组件身上属性绑定，子组件props接收 子组件ref属性绑定 -->
              <orderList
                :list="carList"
                ref="carList"
                :finished="finished"
                :loading="loading"
                :refreshing="refreshing"
                @load="onLoad"
                @refresh="onRefresh"
              ></orderList>
            </div>
            <!-- <div v-else-if="myOrder_active == 1">
            <orderList
              :order_reserver_type="top_active"
              :order_list_type="myOrder_active"
            ></orderList>
          </div>
          <div v-else-if="myOrder_active == 2">
            <orderList
              :order_reserver_type="top_active"
              :order_list_type="myOrder_active"
            ></orderList>
          </div>
          <div v-else-if="myOrder_active == 3">
            <orderList
              :order_reserver_type="top_active"
              :order_list_type="myOrder_active"
            ></orderList>
          </div>
          <div v-else-if="myOrder_active == 4">
            <orderList
              :order_reserver_type="top_active"
              :order_list_type="myOrder_active"
            ></orderList>
          </div> -->
          </van-tab>
        </van-tabs>
      </div>
      <div class="allOrder" v-else>
        <van-tabs
          @click-tab="allOrder_onClick"
          title-active-color="#1989fa"
          color="#1989fa"
        >
          <van-tab
            v-for="(tab, index) in myOrder_tabList"
            :title="tab.title"
            :key="index"
          >
            <div class="main_seach">
              <van-search
                v-model="search_content"
                shape="round"
                background="#fff"
                placeholder="查询城市/乘车人/部门"
                @blur="search_count"
              />
            </div>
            <div v-if="allOrder_active == index">
              <orderList
                :list="carList"
                ref="carList"
                :finished="finished"
                @load="onLoad"
                @refresh="onRefresh"
              ></orderList>
            </div>
            <!-- <div v-if="allOrder_active == 0">0000</div>
            <div v-else-if="allOrder_active == 1">1111</div>
            <div v-else-if="allOrder_active == 2"></div>
            <div v-else-if="allOrder_active == 3"></div>
            <div v-else-if="allOrder_active == 4">4444</div> -->
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <div class="footer_time">
      <FooterTabTime @FooterTabTime="FooterTabTime"></FooterTabTime>
    </div>
  </div>
</template>

<script>
// 订单查看类型  order_reserver_type: 1全部订单; 2个人订单;
// 订单列表类型  order_list_type: 0全部; 1预约中; 2预约成功; 3已完成;4已退订
import orderList from "./components/orderList.vue";
import FooterTabTime from "../FooterTabTime/FooterTabTime.vue";
import { throttle } from "/@/assets/js/utils.js";
export default {
  name: "",
  components: { orderList, FooterTabTime },
  data() {
    return {
      top_active: this.$store.state.top_active,
      top_tabList: [
        { title: "我的订单", top_id: 2 },
        { title: "全部订单", top_id: 1 }
      ],
      my_showFlag: true, // css样式
      all_showFlag: false, // css样式
      myOrder_active: 0,
      allOrder_active: 0,
      myOrder_tabList: [
        { title: "全部", name: 0 },
        { title: "预约中", name: 1 },
        { title: "预约成功", name: 2 },
        { title: "已完成", name: 3 },
        { title: "退订", name: 4 }
      ],
      carList: [],
      search_content: "",
      sort_content: "",
      sort_type: "",
      loading: false,
      finished: false,
      refreshing: false,
      limit: 10,
      pageNum: 1,
      flagNum: 1
    };
  },
  created() {
    this.getTopic(
      this.$store.state.top_active,
      this.$store.state.top_active == 2 ? "myOrder" : "allOrder"
    );
  },
  methods: {
    // top顶部 tab切换
    getTopic(index, str) {
      this.pageNum = 1;
      this.top_active = index;
      this.$store.commit("SET_TOP_ACTIVE", this.top_active);
      switch (str) {
        case "myOrder":
          this.my_showFlag = true;
          this.all_showFlag = false;
          this.myOrder_onClick();
          break;
        case "allOrder":
          this.my_showFlag = false;
          this.all_showFlag = true;
          this.allOrder_onClick();
          break;
      }
    },
    // 我的订单 tab切换
    myOrder_onClick(index) {
      this.pageNum = 1;
      this.myOrder_active = index ? index.name : 0;
      this.getCarList("myOrder", "tabChange");
    },
    // 全部订单 tab切换
    allOrder_onClick(index) {
      this.pageNum = 1;
      this.allOrder_active = index ? index.name : 0;
      this.getCarList("allOrder", "tabChange");
    },

    // 获取列表
    async getCarList(str, num) {
      if (this.refreshing) {
        this.carList = [];
        this.refreshing = false;
      }
      const url = "/security/car/queryOrderList";
      const data = {
        page: this.pageNum,
        limit: this.limit,
        member_id: localStorage.memberId, // * 必传 * 当前用户member_id
        order_reserver_type: this.top_active, // * 必传 * 订单查看类型: 1全部订单; 2个人订单;
        order_list_type:
          str == "myOrder" ? this.myOrder_active : this.allOrder_active, // * 必传 * 订单列表类型: 0全部; 1预约中; 2预约成功; 3已完成;4已退订
        search_content: this.search_content, //搜索内容  城市、约车人、乘车人、部门
        sort_content: this.sort_content, // 1出发时间 2 约车时间 空时 默认约车时间降序
        sort_type: this.sort_type // 1升序 2 降序
      };

      const res = await this.$axiosJson(url, data);
      if (res.ret_code == 10000) {
        let arr = res.data.order_list;
        this.loading = false;
        if (arr.length < 10) {
          this.finished = true;
          this.pageNum = 1;
        } else {
          this.pageNum++;
        }
        if (num == "tabChange") {
          // num == "tabChange"代表 直接取返回的数据
          this.carList = arr;
          // if (arr.length < 10) {
          //   this.finished = true;
          //   this.pageNum = 1;
          // } else {
          //   this.pageNum++;
          // }
        } else {
          this.carList.push(...arr);
          // if (this.carList.length >= res.data.count) {
          //   this.finished = true;
          // }
          // if (arr.length < 10) {
          //   this.finished = true;
          //   this.pageNum = 1;
          // } else {
          //   this.pageNum++;
          // }
        }
      }
    },
    /* 下拉刷新 
        先清空数据 再结束上一次上拉组件
    
      1. 非加载中，loading为false，此时会根据列表滚动位置判断是否触发load事件（列表内容不足一屏幕时，会直接触发）
      2.加载中，loading为true，表示正在发送异步请求，此时不会触发load事件
      3.加载完成，finished为true，此时不会触发load事件
    在每次请求完毕后，需要手动将loading设置为false，表示加载结束
    */
    onRefresh() {
      // debugger
      // debugger;
      this.pageNum = 1;
      this.finished = false;
      this.loading = true; // 将 loading 设置为 true，表示处于加载状态
      this.onLoad("tabChange");
    },
    /* 上拉加载 */
    onLoad(str) {
      // debugger;
      throttle(
        () => {
          this.getCarList(this.top_active == 2 ? "myOrder" : "allOrder", str); // 重新加载数据
          this.loading = false;
        },
        300,
        true
      );
    },

    // 条件搜索 carlist
    search_count() {
      this.carList = [];
      this.getCarList(
        this.top_active == 2 ? "myOrder" : "allOrder",
        "tabChange"
      );
    },
    // 返回
    onClickLeft() {
      this.$router.go(-1);
    },
    // 出发时间、预约时间更改重新获取列表
    FooterTabTime(data) {
      this.carList = [];
      this.sort_type = data.sort_type;
      this.sort_content = data.sort_content;
      this.getCarList(
        this.top_active == 2 ? "myOrder" : "allOrder",
        "tabChange"
      );
    }
  }
};
</script>
<style lang="less" scoped>
.carList {
  padding-top: 5px;
  // // position: relative;
  padding-bottom: 61px;
  .carList_top {
    .carList_top_title {
      // .my_order {
      //   background-color: #f0f;
      // }
      .tabGroup {
        height: 24px;
        line-height: 24px;
        box-sizing: border-box;
        display: flex;
        background-color: #f5f8f8;
        font-size: 14px;
        border-radius: 15px;
        // padding: 0 5px;
        .tab {
          padding: 0 10px;
        }
        .tab.active {
          background-color: #1989fa;
          color: #fff;
          border-radius: 15px;
          padding: 0 10px;
        }
      }
    }
  }
  .carList_main {
    margin-top: 140px;
    // margin-bottom: 100px;
    :deep(.van-tabs__wrap) {
      position: fixed;
      top: 45px;
      width: 100%;
      z-index: 98;
    }
    .main_seach {
      width: 100%;
      position: fixed;
      left: 0;
      top: 88px;
      z-index: 98;
    }
  }
  .footer_time {
    width: 100%;
    // margin-bottom: 160px;
    position: fixed;
    bottom: 0px;
    left: 0;
  }
}
</style>
